<ng-container *ngIf="pkgPlus$ | async as pkgPlus">
  <!-- header -->
  <app-show-header [pkg]="pkgPlus.pkg"></app-show-header>

  <!-- content -->
  <ion-content *ngIf="pkgPlus.pkg as pkg" class="ion-padding with-widgets">
    <!-- ** installing, updating, restoring ** -->
    <ng-container *ngIf="showProgress(pkg); else installed">
      <app-show-progress
        *ngIf="pkg | progressData as progressData"
        [pkg]="pkg"
        [progressData]="progressData"
      ></app-show-progress>
    </ng-container>

    <!-- Installed -->
    <ng-template #installed>
      <ion-item-group *ngIf="pkgPlus.status as status">
        <!-- ** status ** -->
        <app-show-status [pkg]="pkg" [status]="status"></app-show-status>
        <!-- ** installed && !backing-up ** -->
        <ng-container *ngIf="isInstalled(pkg) && !isBackingUp(status)">
          <!-- ** health checks ** -->
          <app-show-health-checks
            *ngIf="isRunning(status)"
            [pkg]="pkg"
          ></app-show-health-checks>
          <!-- ** dependencies ** -->
          <app-show-dependencies
            *ngIf="pkgPlus.dependencies.length"
            [dependencies]="pkgPlus.dependencies"
          ></app-show-dependencies>
          <!-- ** menu ** -->
          <app-show-menu [buttons]="pkg | toButtons"></app-show-menu>
          <!-- ** additional ** -->
          <app-show-additional [pkg]="pkg"></app-show-additional>
        </ng-container>
      </ion-item-group>
    </ng-template>
  </ion-content>
</ng-container>
